.dijitDialogUnderlay {
   background-color: #000 !important;
   opacity: .2;
}

.alfresco-dialog-AlfDialog {
   &.dijitDialog {
      opacity: 0;

      border: @standard-border;
      border-radius: 4px 4px 4px 4px;
      box-shadow: 0 3px 8px rgba(0,0,0,.1);
      font-family: @standard-font;
      font-size: @normal-font-size;
      min-width: @dialog-min-width;
      &.tinymce-dialog {
         min-width: 540px;
         .control {
            margin-right: 0;
         }
         .dialog-body {
            margin-bottom: 35px;
            min-width: 540px;
         }
      }
      .dijitDialogCloseIcon {
         height: 15px;
         margin-top: 12px;
         right: 8px;
         width: 21px;
      }
      // This resets anchors in a dialog. This is required because the dialog appears outside of the main body element.
      a {
         color: @general-font-color;
         text-decoration: @link-text-decoration;
         &:hover {
            colour: @link-font-color-hover;
            text-decoration: @link-text-decoration-hover;
         }
      }
      // This resets input elements in a dialog
      input {
         border: @standard-border;
         font-weight: normal;
      }
   }
   &.dialogDisplayed {
      opacity: 1;
   }
   &--no-min-width {
      &.dijitDialog {
         min-width: 0;
         .dialog-body {
            min-width: 0;
         }
      }
   }
   &.iefooter {
      .dialog-body {
         height: auto;
         margin-bottom: 0;
         padding: 12px;
      }
      .footer {
         bottom: inherit;
         position: inherit;
      }
      &.handleOverflow .dijitDialogPaneContent {
         overflow: auto !important; // Wouldn't normally use !important but has to override direct element setting!
      }
   }
   &.no-padding {
      .dialog-body {
         padding: 0;
      }
      .footer {
         bottom: 0;
         position: absolute;
      }
   }
   .dialog-body, .footer {
      box-sizing: border-box;
   }
   .dialog-body {
      margin-bottom: 40px; // NOTE: If this is changed, the associated margin adjustment in the JS needs updating
      min-width: @dialog-min-width;
      overflow: auto;
      padding: 12px; // NOTE: If this is changed, the associated paddingAdjustment in the JS needs updating
      min-height: 76px; // See AKU-1023, compensated for title
      &.no-buttons {
         margin-bottom: 0;
      }
   }
   .dijitDialogPaneContent {
      border-top: @standard-border;
      overflow: hidden !important; // Wouldn't normally use !important but has to override direct element setting!
      padding: 0;
   }
   .dijitDialogTitleBar {
      background-color: @primary-theme-color;
      background-image: none;
      border: none;
      text-align: center;
      white-space: nowrap;
      .dijitDialogTitle {
         color: @general-font-color;
         display: inline-block;
         font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
         font-size: 24px;
         line-height: 1.5em;
         max-width: 500px;
         overflow: hidden;
         padding: 0 1em 0 1em;
         text-overflow: ellipsis;
         white-space: nowrap;
      }
   }
   .footer {
      background-color: @primary-theme-color;
      background-image: none;
      border: none;
      border-top: @standard-border;
      bottom: 0;
      padding: 8px 0;
      position: absolute;
      text-align: center;
      width: 100%;
   }
   &--textcontent .dialog-body {
      text-align: center;
   }
   &--dialogs-visible {
      overflow: hidden;
   }
}

.dialog-body .control {
   .dijitTextBox {
      border-radius: 3px;
      width: 360px;
   }
   .dijitTextArea {
      width: 356px;
   }
}
